<template>
  <div class="page-main"  v-title data-title="公司变更历史">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>{{baseInfo.name}}公司变更历史</span></div>
    <div class="container">
      <div class="btn-line">
        <div>
          <a-button class="hte-btn add-btn" icon="plus" @click="startChange" v-has="'company:edit'">发起变更</a-button>
        </div>
        <a-input-search v-model="valueSearch" @search="doSearch" :allowClear="true" placeholder="请输入关键字进行搜索" />
      </div>
      <div class="cascade">
        <div class="projec-class-box clearFix" :class="{'project-class-more': more.moreRef0Class}" ref="moreRef0" >
          <div class="projec-class-lable">变更状态：</div>
          <ul class="projec-class-list clearFix" :class="{'projec-class-list-more': more.moreRef0}">
            <li
              v-for="item of projectTypes"
              :key="item.code"
              :class="['hoverShow', { active: projectStatus == item.code }]"
              @click="handleToggle(item.code, 'projectStatus')"
            >
              {{ item.name }}
            </li>            
          </ul>
          <div class="btn-more" @click="changeMore('moreRef0')">更多<a-icon :class="[ 'icon-child-down', { 'icon-child-up': more.moreRef0 }]" slot="suffixIcon" type="caret-up"/></div>
        </div>
      </div>
      <div class="content-list">
        <a-table
          class="hte-table-content"
          :columns="reservationColumns"
          :data-source="reservationData"
          :pagination="pagination"
          :loading="tabLoading"
          size="middle"
          @change="pageChange"
        >
          <template slot="companyName" slot-scope="text, record">            
            <a  :title="text" @click="handleClick('det', record)">{{text}}</a>  
              
          </template>
          <template slot="changeStatus" slot-scope="text, record">            
            <span  >{{ text|companyChangeStatusFilter}}</span>  
              
          </template>
          <template slot="projectStatus" slot-scope="text, record">            
            <span  >{{ text|projectStatusFilter}}</span>  
              
          </template>
          <template slot="operation" slot-scope="text, record">
            <!-- <a v-has="'company:readDetail'" class="mr10" title="查看详情" @click="handleClick('det', record)"
              ><span class="iconfont icon-wendang"></span
            ></a> -->
            <a title="编辑" v-has="'company:edit'" @click="handleClick('edit', record)"><span class="iconfont icon-shenqing"></span></a>
            <a title="变更历史"  @click="handleClick('his', record)">变更历史</a>
          </template>
        </a-table>
      </div>
    </div>
     <a-back-top  style="right:50px;"/>
  </div>
</template>
<script>
import { getAction,downloadFileLink ,postAction} from '@/api/manage'
import { codeInfoList } from '@/api/codeInfo'
import {filterHasPermission} from '@/utils/hasPermission'
import { ResizeHandleMoreMixin } from '@/mixins/ResizeHandleMoreMixin'
import { getDaysBetween } from '@/utils/util'
import { projectStatusFilter,companyChangeStatusFilter,companyStatusFilter } from "@/utils/filter";

export default {
  name: 'companyListHis',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  mixins: [ResizeHandleMoreMixin],
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'companyListHis',
      },
      companyId:this.$route.query.companyId,
      reservationColumns: [
        { title: '公司名称', dataIndex: 'companyName', width: '27%', align: 'left',scopedSlots: { customRender: 'companyName' }, },
        { title: '变更编号', dataIndex: 'id', width: '15%', align: 'left'},
        { title: '变更状态', dataIndex: 'changeStatus', align: 'center', width: '100px' ,scopedSlots: { customRender: 'changeStatus' },},
        // { title: '项目名称', dataIndex: 'projectName', width: '18%', align: 'center',ellipsis: true},
        // { title: '项目编号', dataIndex: 'projectNo', width: '12%', align: 'center',ellipsis: true, },
        // { title: '项目状态', dataIndex: 'projectStatus', width: '12%', align: 'center',ellipsis: true,scopedSlots: { customRender: 'projectStatus' }, },
        { title: '申请人', dataIndex: 'createUser', width: '13%', align: 'center',ellipsis: true, },
        // { title: '申请时间', dataIndex: 'createTime', width: '13%', align: 'center',ellipsis: true, },
        { title: '最后修改人', dataIndex: 'lastUser', width: '13%', align: 'center',ellipsis: true, },
        { title: '最后修改时间', dataIndex: 'lastTime', width: '13%', align: 'center',ellipsis: true, },
        // {
        //   title: '操作',
        //   dataIndex: 'operation',
        //   width: '50px',
        //   align: 'center',
        //   scopedSlots: { customRender: 'operation' },
        // },        
      ],
    
      reservationData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize:10,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },
      tabLoading: false,
      currPageSize: 10,
      valueSearch: '',
      visibleModel: false,
      projectTypes: [ { code: '', name: '全部'},{ code: '1', name: '变更中'},{ code: '2', name: '审批中'},{ code: '3', name: '已入库'},{ code: '10', name: '审批不通过'}],
      projectStatus: '',
      exportLoading: false,
      baseInfo:{},
    }
  },
  filters:{
    companyChangeStatusFilter,
    projectStatusFilter
  },
  computed:{
    statusFilter(){
      const that = this
      return function (status){
      var res = that.projectTypes.find(i=>{return i.code == status})
      if(!!status && !!res){
       return res.name
      }
      return ''
    }
    }
  },
  mounted() {
    this.initData()
    this.getDics()
    this.getDataList()
  },
  methods: {
    startChange(){
      let that = this
      if(this.baseInfo.companyStatus != 3){
          this.$message.warning('当前公司状态不允许变更')
          return
      }
      this.$confirm({
          title: `${that.baseInfo.name}是否确认发起变更？`,
          onOk() {
            postAction('/libraryCompany/hteLibCompany/startChange', { id: that.companyId }).then((res) => {
              if (res.code == 200 && res.result) {
                  let data = res.result 
                  that.doSearch()
                  that.handleClick('det',data.companyChangeDetail)
              }else{
                that.$message.warning(res.message)
              }
            })
        }})
      
    },
    filterHasPermission(value){
      return filterHasPermission(value)
    },
    initData(){
      postAction('/libraryCompany/hteLibCompany/queryById', { id: this.companyId }).then((res) => {
        if (res.code == 200 && res.result) {
            let data = res.result 
            this.baseInfo = data   
        }else{
            this.$message.warning(res.message)
        }
      })
    },
    getDics() {
      
    },
    addBatch(){
      let urlJump = this.$router.resolve({ path: '/company/batchCompany' })
      window.open(urlJump.href, '_blank')
    },
    addNew(){
      let urlJump = this.$router.resolve({ path: '/company/editor' })
      window.open(urlJump.href, '_blank')
    },
    doSearch(){
      this.pagination.current = 1
      this.getDataList()
    },
    /**
     * 查询
     */
    getDataList() {
      this.tabLoading = true
      getAction('/libraryCompany/hteLibCompany/companyHisPage', {
        pageSize: this.currPageSize,
        pageNo: this.pagination.current,
        changeStatus: this.projectStatus,
        keyword: this.valueSearch,
        companyId:this.companyId,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          this.pagination.total = res.result.total
         
          this.reservationData = res.result.records
          this.tabLoading = false
        } else {
          this.$message.warning('数据加载失败:' + res.message)
          this.tabLoading = false
        }
      })
    },
    pageChange(page) {
      this.currPageSize = page.pageSize
      this.pagination.pageSize = page.pageSize
      this.pagination.current = page.current
      this.getDataList()
    },    
    handleToggle(code, type){
      this[type] = code
      this.pagination.current = 1
      this.getDataList()
    },
    handleClick(type, item) {
      if (type === 'det') {
        let urlJump = this.$router.resolve({ path: `/company/editor?id=${item.companyId}&changeId=${item.id}&saveType=2` })
        window.open(urlJump.href, '_blank')
      } else if(type === 'edit'){        
        let urlJump = this.$router.resolve({ path: `/company/editor?id=${item.id}` })
        window.open(urlJump.href, '_blank')
      }
    },
    /**
     * 对新入库createTime或发生信息变更lastTime的公司进行标志（时间维持1个月）
     */
    checkIsStatus(item){
      let cr = ''
      let la = ''      
      if(item.createTime){
        cr = getDaysBetween(item.createTime)
      }
      if(item.lastTime){
        la = getDaysBetween(item.lastTime)
      }
      return  (cr && cr <= 30) || (la && la <= 30)      
    },
    handleExportExcel(){
      let param = {};
  
      console.log("导出参数",param)
      this.exportLoading = true;
      downloadFileLink('/libraryCompany/hteLibCompany/exportXls','公司库导出.xls', param,{type: 'application/vnd.ms-excel'}).then((data)=>{
        this.exportLoading = false;
      })
  
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
@import './index.less';
a.mr10 {
  margin-right: 10px;
  position: relative;
  padding-right: 10px;
  &:after {
    &:extend(.afterbg);
  }
}
.page-main .container .cascade{margin-bottom: 15px;}
.btn-line{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  button{margin-right: 10px;}
  .ant-input-search{width: 38%;}
}
.status{color: #fff;background-color: #ff5722;font-size: 12px;
    text-align: center;padding: 0px 2px;transform: scale(0.75);border-radius: 5px;display: inline-block;
    position: relative;top: -1px;height: 16px;line-height: 16px;margin-left: -2px;
}
</style>